<template>
  <div>
    <div class="carzhong">
      <div class="cargou">
        <div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column label="全选"  type="selection"> </el-table-column>
            <el-table-column label="商品名称">
              <template slot-scope="scope">
                <img :src="scope.row.GImg" width="50px" height="60px" />
                <span class="cargname"> {{ scope.row.GName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="GPrice" label="单价"> </el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.SNum"
                  @change="handleChange"
                  :min="1"
                  label="描述文字"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="小计">
              <template slot-scope="scope">
                <p class="carji">{{ scope.row.GPrice * scope.row.SNum }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作">
              <template slot-scope="scope">
                <el-button
                  class="delbut"
                  icon="el-icon-close"
                  @click="del(scope.row.SId)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="carxia">
          <el-row>
            <el-col :span="3">
              <span @click="jixu">继续购物</span>
            </el-col>
            <el-col :span="5">
              <span>共{{tableData.length}}件商品，已选择{{multipleSelection.length}}件</span>
            </el-col>
            <el-col :span="3">
              <span>合计：{{totalprices}}元</span>
            </el-col>
            <el-col :span="3">
              <button @click="suan(kk)">去结算</button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      totalcount:0,
      ids:[],
      checkedNum:0,
      multipleSelection:'',
      kk:{
        ids:[],
        multipleSelection:'',
        total:''
      }
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.ids=[];
      this.multipleSelection = val;
      for(var i=0;i<val.length;i++)
      {
        this.ids.push(val[i]);
      }
    },
    
    show() {
      this.$axios.get("http://localhost:20338/api/Shop/Show").then((res) => {
        this.tableData = res.data.list;
        this.totalcount=res.data.totalcount;
      });
    },
    handleChange(value) {
      if (value > this.tableData.GNum) {
        this.tableData.SNum = this.tableData.GNum;
      }
      console.log(value);
    },
    del(id) {
      this.$confirm("此操作将永久删除该购物内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("http://localhost:20338/api/Shop/Del?id=" + id)
            .then((res) => {
              if (res.data > 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.show();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    jixu(){
      this.$router.push('/');
    },
    // suan(ids){
    //   this.$router.push({
    //     path:'/Fix',
    //     query:ids
    //   })
    // },
    suan(kk){
      this.kk.ids=this.ids;
      this.kk.multipleSelection=this.multipleSelection.length;
      this.kk.total=this.totalprices;
      console.log(kk);
      if(kk.ids=="")
      {
        alert("必须选择一条数据");
        return;
      }
      this.$router.push({
        path:'/Fix',
        query:kk
      })
    }
  },
  created() {
    this.show();
    this.checkedNum = this.tableData.filter(item=>item.productSelected).length;
  },
  computed:{
    // totalprice(){
    //   this.ids.SNum*this.ids.Price;
    // }
    totalprices(){
      let totalprice = 0;
      for(var i=0;i<this.ids.length;i++)
      {
        totalprice+=this.ids[i].GPrice*this.ids[i].SNum;
      }
      return totalprice;
    }
  }
};
</script>

<style scoped>
.carzhong {
  width: 1600px;
  border: 1px solid;
  background-color: azure;
  margin: auto;
}
.cargou {
  width: 1200px;
  border: 1px solid;
  margin: auto;
  background-color: #fff;
}
.cargname {
  text-align: center;
}
.delbut {
  border: none;
}
.carji {
  color: rgb(236, 173, 55);
}
.carxia {
  width: 1200px;
  margin: auto;
  height: 50px;
  margin-top: 20px;
  text-align: left;
}

</style>